Vue.component("auth",{
    template:`<div>
            <slot name="nologin" v-if="myinfo==null">
               <a href="#">注册</a>
               <a href="#" @click.prevent="showLogin = true">登录</a>
            </slot>
            <slot name="logined" v-else>
                <spa>{{myinfo[props.usernameColumn]}}</spa>
                <a href="#" @click.prevent="logout">退出</a>
            </slot>
            <el-dialog title="登录" :visible.sync="showLogin">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="showLogin = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    data(){
        return {
            myinfo:null,
            props:null,
            form:{username:"",password:""},
            showLogin:false
        }
    },
    created(){
        axios.get("/auth/props")
            .then(res =>{
                this.props = res.data;
                return axios.get("/auth/myinfo");
            }).then(res=>this.myinfo = res.data.data)
    },
    methods:{
        login(){
            let p =new URLSearchParams();
            p.append("username",this.form.username);
            p.append("password",this.form.password);
            axios.post("/auth/login",p)
                .then(res=>{
                    if(res.data.code == 1){
                        this.myinfo = res.data.data;
                        this.showLogin = false;
                    }else{
                        this.$message.error(res.data.msg);
                    }

                })
        },
        logout(){
            axios.get("/auth/logout")
                .then(res=>{
                    if(res.data.code == 1){
                        this.myinfo = null;
                    }
                })
        }
    }
})
